<template>
  <div id="ebookPage" class="ebookPage">
    <div class="name">
      <span class="article_name">{{ bookDetails.bookName }}</span>
      <span class="catalog_name">{{ bookDetails.name }}</span>
    </div>
    <!-- <div class="name_box">{{bookDetails.name}}</div> -->
    <v-touch
      @swipeleft="onSwipeLeft(bookDetails)"
      @swiperight="onSwipeRight(bookDetails)"
      tag="div"
      class="v-touch"
    >
      <div class="text_box" id="text_box" @click="clickBox()">
        <div v-html="bookDetails.text"></div>
      </div>
    </v-touch>
    <div class="bottom_box" id="bottom_box" v-if="isShow">
      <div class="bottom_list">
        <img class="img_icon" src="@/assets/resource/share_icon.png" alt="分享" />
        <p>分享</p>
      </div>
      <div class="bottom_list" @click="catalogPage()">
        <img class="img_icon" src="@/assets/resource/catalog_icon.png" alt="目录" />
        <p>目录</p>
      </div>
      <div class="bottom_list" @click="setBtn()">
        <img class="img_icon" src="@/assets/resource/font_icon.png" alt="设置" />
        <p>设置</p>
      </div>
    </div>
    <div class="set_box" v-if="setVisible && isShow">
      <div class="set_title">字体大小</div>
      <div class="size_box">
        <span class="left" @click="fontReduce">A-</span>
        <span>{{ size }}</span>
        <span class="right" @click="fontAdd">A+</span>
      </div>
      <div class="set_title">背景颜色</div>
      <div class="bg_box">
        <span
          :class="bg == '#F6F6F8' ? 'gray border' : 'gray'"
          @click="changeColor('#F6F6F8')"
        >
          <span v-if="bg == '#F6F6F8'">√</span>
        </span>
        <span
          :class="bg == '#F1E5D1' ? 'brown border' : 'brown'"
          @click="changeColor('#F1E5D1')"
        >
          <span v-if="bg == '#F1E5D1'">√</span>
        </span>
        <span
          :class="bg == '#D8C38C' ? 'yellow border' : 'yellow'"
          @click="changeColor('#D8C38C')"
        >
          <span v-if="bg == '#D8C38C'">√</span>
        </span>
        <span
          :class="bg == '#C7DFC9' ? 'cyan border' : 'cyan'"
          @click="changeColor('#C7DFC9')"
        >
          <span v-if="bg == '#C7DFC9'">√</span>
        </span>
        <span
          :class="bg == '#2E5073' ? 'bule border' : 'bule'"
          @click="changeColor('#2E5073')"
        >
          <span v-if="bg == '#2E5073'">√</span>
        </span>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="ebook_dialog" v-if="dialog">
      <div class="dialog_left">
        <img src="@/assets/common/icon_left.png" class="dia_icon">
        <div class="dialog_tip">向左滑动显示下一页</div>
      </div>
      <div class="dialog_center">
        <img src="@/assets/common/icon_middle.png" class="dia_icons">
        <div class="dialog_tip">点击中间展示功能菜单</div>
        <div class="dialog_text" @click="closeDiaLog">我知道了</div>
      </div>
      <div class="dialog_right">
        <img src="@/assets/common/icon_right.png" class="dia_icon">
        <div class="dialog_tip">向右滑动显示上一页</div>
      </div>
    </div>
  </div>
</template>

<script>
import "@static/css/ebook/index.css";
import { Toast } from 'mint-ui'
import { ebookDetails, catalogList } from "@/api/resource";

export default {
  name: "ebook",
  data() {
    return {
      isDetails: true,
      isCatalog: false,
      bookDetails: {},
      size: 18,
      bg: "#F1E5D1",
      setVisible: false,
      isShow: false,
      index: 0,
      list: [],
      catalog: null,
      orderNum: null,
      form: {
        bookId: this.$route.query.bookid,
        markId: this.$route.query.markid,
        orderNum: null
      },
      listLength: null,
      dialog: true
    };
  },
  created() {
    this.getDetails(this.form);
    this.catalog = localStorage.getItem("catalog");
    this.getCatalog();
    // this.catalogPage();
    if(localStorage.getItem("dialog")) {
      this.dialog = false
    }
  },
  methods: {
    getDetails(obj) {
      //获取详情
      window.scrollTo(0,0)
      ebookDetails(obj).then(res => {
        if (res.data.code === 0) {
          this.bookDetails = res.data.data;
          this.form.orderNum = this.bookDetails.orderNum
          // console.log(this.bookDetails.text);
          this.bookDetails.text = this.bookDetails.text.replace(
            /src="/g,
            'src="http://192.168.2.247/file'
          );
        }
      });
    },
    getCatalog(ind) {
      //获取目录
      catalogList({ bookid: this.form.bookId }).then(res => {
        this.list = res.data;
        this.listLength = Math.ceil(this.list.length * 0.2)
      });
    },
    setBtn() {
      this.setVisible = true;
    },
    clickBox() {
      this.setVisible = false;
      this.isShow = !this.isShow;
    },
    onSwipeLeft(common) {
      //向左滑动
      console.log(common.orderMaxNum,"左划");
      this.form = {
        markId: common.markid,
        bookId: common.bookId,
        orderNum: this.form.orderNum+1
      }
      if((this.form.orderNum < this.listLength-1) && localStorage.getItem('messageCode') != "null") {
        this.getDetails(this.form)
      } else if((this.form.orderNum > this.listLength-1) && localStorage.getItem('messageCode') != "null") {
        Toast('试读结束，请购买图书或开通VIP会员')
        this.form.orderNum = common.orderNum
      } else if(this.form.orderNum <= common.orderMaxNum) {
        this.getDetails(this.form)
      } else {
        Toast('已经是最后一页了')
        this.form.orderNum = common.orderNum
      }
    },
    onSwipeRight(common) {
      //向右滑动
      console.log("右滑");
      this.form = {
        markId: common.markid,
        bookId: common.bookId,
        orderNum: this.form.orderNum-1
      }
      if(this.form.orderNum == 0 || this.form.orderNum >= common.orderMinNum) {
        this.getDetails(this.form)
      } else {
        this.form.orderNum = 0
        Toast('已经是第一页了')
      }
    },
    changeColor(color) {
      //更换背景颜色
      this.bg = color;
      let dom = document.getElementById("ebookPage");
      dom.setAttribute("style", `background:${this.bg} !important`);
    },
    fontReduce() {
      //字号变小
      if (this.size > 1) {
        this.size = this.size - 1;
        let dom = document.getElementById("text_box");
        dom.setAttribute("style", `font-size:${this.size}px !important`);
      }
    },
    fontAdd() {
      //字号变大
      this.size = this.size + 1;
      let dom = document.getElementById("text_box");
      dom.setAttribute("style", `font-size:${this.size}px !important`);
    },
    catalogPage(index) {
      //目录页面
      this.$router.push({ path: "catalog", query: { bookid: this.form.bookId } });
    },
    closeDiaLog() {
      this.dialog = false
      localStorage.setItem("dialog",true)
    }
  }
};
</script>
